import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { ScatterChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart, ScatterChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;

        const option = {
            //你的代码
            backgroundColor: '#03171f',
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(17,95,182,0.5)',
                textStyle: {
                    color: "#fff"
                },
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: '23%',
                left: '8%',
                right: '8%',
                bottom: '13%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['整形科',
                    '皮肤科',
                    '精神科',
                    '肿瘤科',
                    '骨科',
                    '内分泌科',
                    '消化科',
                    '放射科',
                ],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#063374",
                        width: 1,
                        type: "solid"
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,0.8)',
                        fontSize: 10
                    }
                },
            }],
            yAxis: [{
                name: '单位(万元)',
                nameTextStyle: {
                    color: 'rgba(255,255,255,0.8)'
                },
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: 'rgba(255,255,255,0.8)',
                        fontSize: 10
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#063374",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "#063374",
                        type: ""
                    }
                }
            }],
            series: [{
                name: '好',
                type: 'bar',
                data: [90, 95, 120, 110, 98, 130, 111, 111, 111, 111],
                barWidth: 15, //柱子宽度
                barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00FFB4'
                        }, {
                            offset: 1,
                            color: 'rgba(0, 255, 255, 0.1)',
                        }]),
                        opacity: 1,
                    }
                }
            }]
        };

        // if (option && typeof option === "object") {
        //     myChart.setOption(option, true);
        //     refreshChart(myChart, option);
        //     var index4 = 0; //播放所在下标
        //     var mTime = setInterval(function () {
        //         myChart.dispatchAction({
        //             type: 'showTip',
        //             seriesIndex: 0,
        //             dataIndex: index4
        //         });
        //         index4++;
        //         if (index4 >= 6) {
        //             //console.log('data4', fxdata.length)
        //             index4 = 0;
        //             //console.log(fxdata)
        //         }
        //     }, 2800);
        // }

        // 刷新图表
        function refreshChart(chartID, option) {
            setInterval(function () {
                chartID.clear();
                chartID.setOption(option, true)
            }, 10000)
        }

        chart.setOption(option);
        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '30vw', height: '12vw' }}></div>;
};

export default EChartsComponent;

